<template>
  <view class="coupon">
    <van-tabs :active="active" @change="onChange" sticky color="#105BDE" line-width="25px">
      <van-tab
        v-for="(tab, tabIndex) in tabs"
        :key="tabIndex"
        :title="tab.title"
      >
        <view class="coupon-detail" v-if="couponData.length > 0">
          <view
            v-for="(item, index) in couponData"
            :key="index"
            :class="tab.class"
          >
            <view class="coupon-price">
              ￥<span class="price">{{ item.couponBalance }}</span>
            </view>
            <view class="special-coupon">
              <view class="new-coupon">
                <text>新人专享优惠</text>
                <span>{{ item.expiredTime }} 到期</span>
              </view>
              <view v-if="tabIndex === 0" class="coupon-btn">
                <van-button color="#105BDE" plain type="info" size="medium">立即使用</van-button>
              </view>
              <view v-else class="coupon-image">
                <image
                  style="width: 100%; height: 100%;"
                  :src="tab.image"
                  mode=""
                ></image>
              </view>
            </view>
          </view>
        </view>
        <view class="no-data" v-else>
          暂无数据
        </view>
      </van-tab>
    </van-tabs>
  </view>
</template>

<script>
  import {
    getCouponInfo
  } from '@/api/user'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        active: 0,
        tabs: [{
            title: '可使用',
            class: 'coupon-detail-info',
            image: '',
          },
          {
            title: '已使用',
            class: 'coupon-detail-use',
            image: require('@/static/images/hasUsedIcon.png'),
          },
          {
            title: '已过期',
            class: 'coupon-detail-use',
            image: require('@/static/images/expireIcon.png'),
          },
        ],
        couponData: [
          // {
          //   money: 5,
          //   createTime: '2023-11-06'
          // },
          // {
          //   money: 6,
          //   createTime: '2023-11-06'
          // },
          // {
          //   money: 2,
          //   createTime: '2023-11-06'
          // },
          // {
          //   money: 5,
          //   createTime: '2023-11-06'
          // },
        ],
        couponDataClone: []
      }
    },
    computed: {
      ...mapGetters(['userInfo']),
    },
    onShow() {
      this.couponDataClone = JSON.stringify(this.couponData)
      this.getCouponList()
    },
    methods: {
      async getCouponList(e = 0) {
        const data = await getCouponInfo(this.userInfo.userId, e)
        if (data.code === 200) this.couponData = data.rows
      },
      onChange(e) {
        this.getCouponList(e.detail.index)
        // if (e.detail.index > 0) {
        //   const uniqueMoneySet = new Set();
        //   // 筛选 money 为 5 或 2，并确保 money 不相同
        //   const filteredData = this.couponData.filter(item => {
        //     if (item.money === 5 || item.money === 2) {
        //       if (!uniqueMoneySet.has(item.money)) {
        //         uniqueMoneySet.add(item.money);
        //         return true;
        //       }
        //     }
        //     return false;
        //   });
        //   this.couponData = filteredData
        // } else {
        //   this.couponData = JSON.parse(this.couponDataClone)
        // }
      }
    }
  }
</script>

<style lang="less" scoped>
  .coupon {
    ::v-deep .van-tab--active {
      color: #105BDE !important;
    }

    ::v-deep .van-tab {
      color: #555555;
    }

    ::v-deep .van-tabs__wrap {
      box-shadow: 0 0 1px 0 rgba(185, 185, 185, 0.8) !important;
    }
    
    ::v-deep .van-tab__pane {
      min-height: 100vh;
    }

    .coupon-detail {
      padding: 15px;

      .coupon-detail-info,
      .coupon-detail-use {
        width: 100%;
        /* 根据背景图片的宽高比调整 */
        background: url(@/static/images/coupon-enabled.png) no-repeat center center;
        background-size: contain;
        display: flex;
        height: 10.5vh;
        align-items: center;
        margin-bottom: 12px;
        position: relative;
        /* 需要的话，可以添加 position */
      }

      .coupon-detail-use {
        width: 100%;
        background: url(@/static/images/couponhasUse.png) 0 0 no-repeat;
        background-size: contain;

        .coupon-price {
          flex: 0.45;
          color: #999999;
        }

        .new-coupon {
          color: #999999 !important;

          text {
            color: #999999 !important;
          }

          span {
            color: #999999 !important;
          }
        }
      }

      .coupon-price {
        flex: 0.5;
        text-align: center;
        font-size: 17px;
        color: #105BDE;

        .price {
          font-size: 40px;
        }
      }

      .special-coupon {
        display: flex;
        flex: 1.45;
        align-items: center;
        justify-content: space-around;

        .new-coupon {
          display: flex;
          flex-direction: column;

          text {
            color: #222222;
            font-size: 14px;
            margin-bottom: 6px;
          }

          span {
            color: #7E7E7E;
            font-size: 12px;
          }
        }

        .coupon-btn {
          width: 30%;
          ::v-deep .van-button {
            border-radius: 20px;
            width: 75px;
            height: 28px;
            font-size: 13px;
          }
        }

        .coupon-image {
          width: 62px;
          height: 47px;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .no-data {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      color: #ccc;
    }
  }
</style>
